<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用定位元素设计层叠效果</title>
		<style>
			.container{
				width: 200px;
				height: 200px;
				border-width: 1px;
				border-color: red;
				border-style: solid;
				/* border: 1px solid red; */
				/* margin: 200px; *//*四个方向外边距200px*/
				
			}
			.d1{
				width: 200px;
				height: 200px;
				position:absolute ;/*绝对定位*/
				background-color: red;
				z-index: 20;
				top:50px;
				left:200px;
			}	
			.d2{
				position:absolute ;/*绝对定位:参照外层最近的定位父元素,如果没有父元素,则参照body*/		top:50px;
				left:200px;
				background-color: green;
				z-index:9 ;/*显示优先级,只针对定位元素起作用*/
			}
			.d3{
				position:absolute ;/*绝对定位*/
				background-color: blue;
				top:0px;
				left:200px;
			}
			.container{
				width: 500px;
				height: 1500px;
				margin-left: 300px;
			}
			.adv{
				width: 150px;
				height: 300px;
				background-color: black;
				position: fixed;/*固定定位:参考窗口*/
				right: 0px;
				top:100px;
			}
			.rel{
				width: 200px;
				height: 200px;
				background-color: lightcoral;
				position: relative;/*相对定位:参照自身原本的位置移动*/
				left: 20px;
			}
			.p1{
				width: 100px;
				height:400px ;
				border: 1px solid black;
				background-color: black;
				color: white;
				margin: auto;/*自动调节左右边距,居中*/
				animation: out 2s linear infinite; 
			}
			.p2{
				width: 60px;
				height:350px ;
				border: 1px solid red;
				background-color: red;
				margin: auto;
				animation: inner 2s linear infinite; 
			}
			@keyframes out{
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}
			@keyframes inner{
				from{transform: rotate(0deg);}
				to{transform: rotate(-360deg);}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="d1">1</div>
			<div class="d2">2</div>
			<div class="d3">3</div>
		</div>
		<div class="adv">固定定位</div>
		<div class="rel">相对定位</div>
		<hr color="#FF0000" />
		<div class="p1">
			<p class="p2">内层</p>
		</div>
	</body>
</html>
